<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>upload file</title>
	</head>

	<body>
		<!-- 选择系统文件 -->
		<input type="file" name="" id="file" />

		<script>
			const fileContainer = document.querySelector('#file');

			// console.log(fileContainer);

			fileContainer.addEventListener('change', (event) => {
				const file = event.target.files[0];
				// console.log(file);
				if (!file) {
					console.log('请选择文件');
					return;
				}

				/**
				 * 因为是上传文件，所以参数格式需要使用 formData
				 */
				// 创建 formData 对象
				const formData = new FormData();

				// 添加文件到 formData 中
				formData.append('file', file);

				// 使用 xhr 发送
				const xhr = new XMLHttpRequest();

				// 设置请求方式
				xhr.open('POST', 'http://localhost:6001/api/upload', true);

				// 设置请求头
				// 注意：对于 multipart/form-data 类型，通常不需要手动设置 Content-Type
				// 因为浏览器会自动设置正确的 boundary
				// xhr.setRequestHeader('Content-Type', 'multipart/form-data'); // 不需要手动设置

				/**
				 * onload
				 * onload 事件在请求成功完成并且响应数据准备好时触发。这意味着请求的状态码在 200-299 范围内，或者状态码是 0
				 * 通常用于处理成功的响应数据
				 * 不需要检查 readyState 属性，因为 onload 只在请求成功时触发
				 * 不适用于处理其他 readyState 变化的状态，例如请求正在加载数据时的状态变化。
				 * 不适用于处理错误状态，例如 404 或 500 错误。
				 */
				xhr.onload = function () {
					if (xhr.status >= 200 && xhr.status < 300) {
						console.log(xhr.response);
						console.log(xhr.responseText);
					} else {
						throw new Error(
							`xhr onload error status ${xhr.status}`
						);
					}
				};

				/**
				 *  onreadystatechange 事件在 XMLHttpRequest 对象的 readyState 属性发生变化时触发。readyState 有五个可能的值：
				 *  0 (UNSENT)：请求未初始化。
				 *  1 (OPENED)：请求已建立，但尚未发送。
				 *  2 (HEADERS_RECEIVED)：请求已发送，正在接收响应头部。
				 *  3 (LOADING)：正在接收响应数据。
				 *  4 (DONE)：操作已完成，响应数据已完全接收
				 *  可以用于处理请求的各个阶段，包括成功和失败的情况
				 */

				xhr.send(formData);
			});
		</script>
	</body>
</html>
